<template>
  <el-dialog
    v-model="visible"
    :title="dataForm.status === 1 ? $t('prodList.offShelfManage') : $t('product.pendingReview')"
    :close-on-click-modal="false"
    width="35%"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      :label-width="$t('language') === 'language' ? '130px' : '80px'"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        :label="$t('groups.handler')"
        prop="handler"
      >
        <el-input
          v-model="dataForm.handler"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item
        :label="$t('groups.reasonForOffline')"
        prop="offlineReason"
      >
        <el-input
          v-model="dataForm.offlineReason"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 10}"
          maxlength="200"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item
        :label="$t('components.offlineTime')"
        prop="createTime"
      >
        <el-input
          v-model="dataForm.createTime"
          :disabled="true"
        />
      </el-form-item>

      <el-form-item
        v-if="isAudit"
        :label="$t('components.reasonForApply')"
        prop="applyReason"
      >
        <el-input
          v-model="dataForm.applyReason"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 10}"
          maxlength="200"
          :disabled="true"
        />
      </el-form-item>

      <el-form-item
        v-if="dataForm.status>1"
        :label="$t('components.processingStatus')"
        prop="status"
      >
        <!-- 1平台进行下线 2 重新申请，等待审核 3.审核通过 4 审核未通过 -->
        <el-radio-group
          v-model="dataForm.status"
          :disabled="!isAudit"
        >
          <el-radio
            :label="2"
            disabled
          >
            {{ $t('product.pendingReview') }}
          </el-radio>
          <el-radio :label="3">
            {{ $t('productComm.pass') }}
          </el-radio>
          <el-radio :label="4">
            {{ $t('productComm.noPass') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="dataForm.status === 4"
        :label="$t('components.denialReason')"
        prop="refuseReason"
        :required="true"
        :show-message="false"
      >
        <el-input
          v-model="refuseReason"
          :class="{'textarea-class':refuseReason}"
          :disabled="!isAudit"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 10}"
          maxlength="200"
        />
      </el-form-item>
    </el-form>
    <el-divider v-if="dataForm.offlineHandleEventItemList && dataForm.offlineHandleEventItemList[0].createTime" />
    <el-form
      v-if="dataForm.offlineHandleEventItemList && dataForm.offlineHandleEventItemList[0].createTime"
      style="margin-left:10px"
      @submit.prevent
    >
      <div>
        <div style="margin-bottom:10px">
          <strong>{{ $t('components.applicationHistory') }}</strong>
        </div>
        <div
          v-for="item in dataForm.offlineHandleEventItemList"
          :key="item.eventItemId"
        >
          <el-row
            type="flex"
            justify="space-around"
          >
            <el-col :span="4">
              <strong>{{ $t('order.applicationTime') }}：</strong>
            </el-col>
            <el-col :span="20">
              <span class="content-color">{{ item.createTime }}</span>
            </el-col>
          </el-row>
          <el-row
            type="flex"
            justify="space-around"
          >
            <el-col :span="4">
              <strong>{{ $t('components.reasonForApply') }}：</strong>
            </el-col>
            <el-col :span="20">
              <span class="content-color">{{ item.reapplyReason }}</span>
            </el-col>
          </el-row>
          <el-row
            v-if="item.auditTime"
            type="flex"
            justify="space-around"
          >
            <el-col :span="4">
              <strong>{{ $t('components.reviewTime') }}：</strong>
            </el-col>
            <el-col :span="20">
              <span class="content-color">{{ item.auditTime }}</span>
            </el-col>
          </el-row>
          <el-row
            v-if="item.refuseReason"
            type="flex"
            justify="space-around"
          >
            <el-col :span="4">
              <div>
                <strong>{{ $t('components.denialReason') }}：</strong>
              </div>
            </el-col>
            <el-col :span="20">
              <div>
                <span class="content-color">{{ item.refuseReason }}</span>
              </div>
            </el-col>
          </el-row>
          <div>
            <el-divider />
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('remindPop.cancel') }}
        </div>
        <div
          :class="[!isAudit?'disabled-btn':'','default-btn primary-btn']"
          @click="onSubmit()"
        >
          {{ $t('group.confirmReview') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  selectUrl: {
    default: '',
    type: String
  },
  updateUrl: {
    default: '',
    type: String
  }
})
const emit = defineEmits(['refreshDataList'])

let id = 0
const dataRule = {
}

const isAudit = ref(false)
const visible = ref(false)
const dataFormRef = ref(null)
const dataForm = ref({
  eventId: null,
  handleType: null,
  handleId: null,
  shopId: null,
  handlerId: null,
  status: null,
  offlineReason: null,
  applyReason: null,
  eventItemId: null,
  lastOfflineHandleEventItem: null
})
const refuseReason = ref('')
const init = (idVal) => {
  id = idVal || 0
  isAudit.value = false
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.clearValidate()
    if (id) {
      http({
        url: http.adornUrl(props.selectUrl + '/' + id),
        method: 'get',
        params: http.adornParams()
      }).then(({ data }) => {
        if (!data) {
          ElMessage({
            message: $t('components.tipOfflineAuditTip1'),
            type: 'error',
            duration: 1500,
            onClose: () => {
              visible.value = false
              emit('refreshDataList')
            }
          })
          return
        }
        dataForm.value = data
        const lastOfflineHandleEventItem = data.lastOfflineHandleEventItem
        if (lastOfflineHandleEventItem) {
          dataForm.value.applyReason = lastOfflineHandleEventItem.reapplyReason
          dataForm.value.eventItemId = lastOfflineHandleEventItem.eventItemId
          refuseReason.value = lastOfflineHandleEventItem.refuseReason
        }
        if (data.status === 2) {
          refuseReason.value = ''
          isAudit.value = true
        }
      })
    }
  })
}

// 表单提交
const onSubmit = () => {
  if (!isAudit.value) {
    return
  }
  if (dataForm.value.status === 2) {
    ElMessage.warning($t('components.aduitChangeTips'))
    return
  }
  if (dataForm.value.status === 4) {
    if (!refuseReason.value) {
      ElMessage.warning($t('shopProcess.auditTip3'))
      return
    }
    const reg = /^\s+$/g
    if (reg.test(refuseReason.value)) {
      ElMessage.warning($t('shopProcess.inputAllSpace'))
      return
    }
  }
  ElMessageBox.confirm($t('components.tipOfflineAuditTip2'), $t('remindPop.remind'), {
    confirmButtonText: $t('remindPop.confirm'),
    cancelButtonText: $t('remindPop.cancel')
  }).then(() => {
    visible.value = false
    http({
      url: http.adornUrl(props.updateUrl),
      method: 'post',
      data: http.adornData({
        eventId: dataForm.value.eventId,
        eventItemId: dataForm.value.eventItemId,
        handleId: id,
        status: dataForm.value.status,
        refuseReason: refuseReason.value || null
      })
    }).then(() => {
      ElMessage({
        message: $t('remindPop.success'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
  })
}

defineExpose({
  init
})

</script>
<style  lang="scss" scoped>
.content-color {
  color: #155bd4;
  word-break: break-word;
}
  .el-form-item.is-error :deep(.textarea-class .el-textarea__inner){
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
    &:focus{
      box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
    }
  }
</style>
